<template>
  <el-container class="layout-container-demo">
    <el-aside width="200px">
      <el-scrollbar>
        <!-- 菜单容器 -->
        <el-menu
          default-active="/home"
          active-text-color="#ffd04b"
          background-color="#545c64"
          text-color="#fff"
          router
        >
          <!-- 一级菜单 -->
          <el-menu-item index="/home">
            <el-icon><HomeFilled /></el-icon>
            <span>系统首页</span>
          </el-menu-item>
          <el-menu-item index="/admin-user">
            <el-icon><Avatar /></el-icon>
            <span>管理员（员工）管理</span>
          </el-menu-item>
          <!-- 二级菜单 -->
          <el-sub-menu index="mall-man">
            <!-- 二级菜单的第一级的标题 -->
            <template #title>
              <el-icon><List /></el-icon>
              <span>商城管理</span>
            </template>
            <!-- 二级菜单的直接子菜单 -->
            <el-menu-item index="/pro-man">
              <el-icon><Paperclip /></el-icon>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item index="/order-man">
              <el-icon><Paperclip /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item index="/lunBo-man">
              <el-icon><Paperclip /></el-icon>
              <span>轮播图管理</span>
            </el-menu-item>
            <el-menu-item index="/user-man">
              <el-icon><Paperclip /></el-icon>
              <span>用户管理</span>
            </el-menu-item>
          </el-sub-menu>

          <!-- 二级菜单 -->
          <el-sub-menu index="oa-man">
            <!-- 二级菜单的第一级的标题 -->
            <template #title>
              <el-icon><Briefcase /></el-icon>
              <span>oa系统</span>
            </template>
            <!-- 二级菜单的直接子菜单 -->
            <el-menu-item index="/riBao-man">
              <el-icon><Paperclip /></el-icon>
              <span>日报管理</span>
            </el-menu-item>
            <el-menu-item index="/tongZhi-man">
              <el-icon><Paperclip /></el-icon>
              <span>通知公告</span>
            </el-menu-item>
            <el-menu-item index="/toDos-man">
              <el-icon><Paperclip /></el-icon>
              <span>待办事项</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px">
              <setting />
            </el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import {
  Menu as Setting,
  Avatar,
  HomeFilled,
  List,
  Paperclip,
  Briefcase,
} from '@element-plus/icons-vue'
</script>

<!-- sass css预处理器械-升级版的css语法 -->
<!-- sass提供两种样式语法，scss、sass -->
<!-- scss语法兼容css -->
<style scoped lang="scss">
// .layout-container-demo {
//   height: 100vh;
// }
// .layout-container-demo .el-header {
//   position: relative;
//   background-color: var(--el-color-primary-light-7);
//   color: var(--el-text-color-primary);
// }
// .layout-container-demo .el-aside {
//   color: var(--el-text-color-primary);
//   background: var(--el-color-primary-light-8);
// }
// .layout-container-demo .el-menu {
//   border-right: none;
// }
// .layout-container-demo .el-main {
//   padding: 0;
// }
// .layout-container-demo .toolbar {
//   display: inline-flex;
//   align-items: center;
//   justify-content: center;
//   height: 100%;
//   right: 20px;
// }

// sass语法--css选择器嵌套(下面的代码会被vite编译为上面的代码)
$baseWidth: 20px;
.layout-container-demo {
  height: 100vh;
  .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }
  .el-aside {
    // --el-text-color-primary css变量--elementPlus组件内置的css变量
    // 使用时要加var函数
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
    height: 100vh;
  }
  .el-menu {
    border-right: none;
    height: 100vh;
  }
  .el-main {
    padding: 0;
  }
  .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: $baseWidth;
  }
}
</style>
